<template>
    <div class="header">
        <div style="width:50px;height:50px;text-align:center">
            <img height="50" width="45" :src="logoImgUrl" alt="logo">
        </div>
        <el-dropdown>
            <div class="el-dropdown-link identity">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
                <div style="font-size:8px;">
                    <span style="margin:3px 5px">姓名：{{params.username}}</span>
                    <div style="display:flex;margin:3px 0 3px 5px;justify-content:center;align-items:center">
                        <span >权限：</span>
                        <el-select @change="PChange" v-model="usePermission.usePermission" slot="prepend" :placeholder="usedPermission.permission" size='mini' style="width:100px;">
                            <el-option v-if="usedPermission.permission != '学生'" label="教 师" value="teacher"></el-option>
                            <el-option v-if="usedPermission.permission == '管理员' || usedPermission.permission == '超级管理员'" label="管理员" value="admin"></el-option>
                            <el-option v-if="usedPermission.permission == '超级管理员'" label="超级管理员" value="superadmin"></el-option>
                        </el-select>  
                    </div>
                </div>
            </div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click="logout">
                    <el-button @click="logout">登出</el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

            
        <div class="media-body">
            <div class="pull-left">
                <a class="messages" href="#">
                    <i class="iconfont icon-xinjian"></i>
                    <span>Message</span>
                </a>
            </div>
        </div>

        <div class="media-body">
            <div class="pull-left">
                <a class="messages" href="#">
                    <i class="iconfont icon-xinjian"></i>
                    <span>Download</span>
                </a>
            </div>
        </div>

        <div class="pull-right">
            <span class="newTime">{{this.myDateTime}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            myDateTime: "2",
            logoImgUrl:require('../assets/OES.png'),
            usePermission: {},
        }
    },
    props: {
        params: {
            type: Object,
            default:{}
        }
    },
    created() {
        this.usedPermission = JSON.parse(sessionStorage.getItem('usedPermission'))
    },
    mounted() {
        this.getCurrentTime();
        clearInterval(myTimeDisplay );
        let myTimeDisplay = setInterval(() => {
            this.getCurrentTime(); //每秒更新一次时间
        }, 1000);
    },
    methods: {
        PChange() {

            localStorage.setItem('usePermission', JSON.stringify({
                usePermission: this.usePermission.usePermission,
                permission: this.usePermission.permission,
            }));
            this.$router.push({
                path:'/' + this.usePermission.usePermission,
            })

        },
        getCurrentTime() {
            let self = this
            //获取当前时间
            var date = new Date();
            var year = date.getFullYear(); //当前年份
            var month = date.getMonth(); //当前月份
            var data = date.getDate(); //天
            var hours = date.getHours(); //小时
            var minute = date.getMinutes(); //分
            var second = date.getSeconds(); //秒
            if ((month + 1) < 10) {
                month = "0" + (month + 1)
            }
            if (data < 10) {
                data = "0" + data
            }            
            if (hours < 10) {
                hours = "0" + hours
            }
            if (minute < 10) {
                minute = "0" + minute
            }
            if (second < 10) {
                second = "0" + second
            }
            var time = year + "-" + month + "-" + data + " " + hours + ":" + minute + ":" + second;
            this.myDateTime = time;
        },
        logout(){
            sessionStorage.clear()
            localStorage.clear()
            setTimeout(() => {
            this.$router.push({
                path: '/login'
            })
            }, 2000)
        },
    }
}
</script>

<style lang='stylus'>
.header
    display flex
    height 50px
    background #50a3a2
    margin-bottom 2px
    .identity
      width 230px
      background rgba(255,255,255,0.1)
      color #fffef9
      display flex
      justify-content center
      align-items center
      .el-input__inner
        padding-left 5px
        padding-right 10px
    .media-body
      display flex
      .pull-left
        height 100%
        .messages
          text-decoration: none;
          color #a1a3a6
          font-size 18px
          display flex
          height 100%
          i
            width 50px  
            flex  0 0 50px
            background-color #50a3a2
            font-size 30px
            display flex
            justify-content center
            align-items center
            color #ffffff
          span
            background #50a3a2
            display none
        :hover span
            color green
            animation pull
            overflow hidden
            animation-duration 1000ms
            display flex
            align-items center 
            @keyframes pull
                0%
                    width 0%
                100%
                    width 100%
    .pull-right
      flex: 1
      text-align: right;
      font-size: 26px;
      color #ffffff
      margin-right 20px
      .newTime
        height 100%
        display flex
        justify-content right
        align-items center
        background #50a3a2
</style>